<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <h2>{{message}} -- {{message}}</h2>
        <h2>{{count * 2}}</h2>
        <h2>{{message.split(' ').reverse().join(' ')}}</h2>
        <h1>{{ getReverse() }}</h1>

        <h2>{{emo ? '难过' : '开心'}}</h2>
        <button @click="change">切换心情</button>
    </template>

    <!-- 操作DOM结构的代码对浏览器性能的开销是非常大的，所以Vue中的数据驱动视图，操作数据源，视图自动更新 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const App = {
            template:'#my-app',
            data () {
                return {
                    message:'Hello 阳阳',
                    count:100,
                    emo:false
                }
            },
            methods:{//methods是一个属性
                getReverse(){
                    return this.message.split(' ').reverse().join(' ')
                },
                change(){
                    this.emo = !this.emo
                }
            }
        }

        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>